将输入值为非数字的字符替换为空

最新推荐文章于 2024-04-29 16:31:17 发布

hello_kking

最新推荐文章于 2024-04-29 16:31:17 发布

阅读量2.7k

点赞数 3

本文链接：https://blog.csdn.net/qq_42760581/article/details/103958440

版权

之前做过一个需求，要求只能在input框内输入整数，于是在input框使用

 <input type="text" onkeyup="this.value=this.value.replace(/\D/g,'')" [(ngModel)]="price" />

此处使用了onkeyup事件，当键盘抬起时触发，事件里面是一个正则表达式，当你输入非数字的字符串时，在你抬起键盘的那一刻，此事件会自动将输入的非数字内容清空。

但是在提交的时候发现这个功能失效了，虽然在输入的input框里清除掉了非数字内容，但是提交的时候却依然把非数字内容提交上去了。虽然看不见，但是却存在着，这算是onkeyup事件的一个BUG吧

解决方法

以angular为例

 <input  type="text" onkeyup="this.value=this.value.replace(/\D/g,'')" 
 [(ngModel)]="price" (ngModelChange)="price = clean($event)"/>

 clean(event: any) {
    event = event.replace(/\D/g, "");
    return event;
  }

加一个ngModelChange事件(会随着你的输入状态触发)，在clean方法里清空非整数内容，然后在ngModelChange里把整数值赋给当前绑定的对象，此时非数字内容才算真正消失了。

关注